<template>
  <el-select
    v-model="currentTableId"
    placeholder="请选择表"
    @change="tableChange()"
  >
    <el-option
      v-for="item in selectTable"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
  <el-table :data="tableData" style="width: 100%" max-height="350">
    <el-table-column label="列名" width="200">
      <template #default="scope">
        <el-input
          v-if="scope.$index == editId"
          v-model="scope.row.columnName"
        ></el-input>
        <span v-else>{{ scope.row.columnName }}</span>
      </template>
    </el-table-column>
    <el-table-column label="注释" width="250">
      <template #default="scope">
        <el-input
          v-if="scope.$index == editId"
          v-model="scope.row.columnDescription"
        ></el-input>
        <span v-else>{{ scope.row.columnDescription }}</span>
      </template>
    </el-table-column>
    <el-table-column label="列类型" width="180">
      <template #default="scope">
        <el-select
          v-if="scope.$index == editId"
          v-model="scope.row.columnType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span v-else>{{ scope.row.columnType }}</span>
      </template>
    </el-table-column>
    <el-table-column label="长度" width="80">
      <template #default="scope">
        <el-input
          v-if="scope.$index == editId"
          v-model="scope.row.maxLength"
        ></el-input>
        <span v-else>{{ scope.row.maxLength }}</span>
      </template>
    </el-table-column>
    <el-table-column label="小数" width="50">
      <template #default="scope">
        <el-input
          v-if="scope.$index == editId"
          v-model="scope.row.minLength"
        ></el-input>
        <span v-else>{{ scope.row.minLength }}</span>
      </template>
    </el-table-column>
    <el-table-column label="主键" width="50">
      <template #default="scope">
        <el-checkbox
          v-model="scope.row.isKey"
          :disabled="scope.$index != editId"
        ></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="可空" width="50">
      <template #default="scope">
        <el-checkbox
          v-model="scope.row.isNull"
          :disabled="scope.$index != editId"
        ></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="字段" width="50">
      <template #default="scope">
        <el-checkbox v-model="scope.row.dbIgnore" disabled></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="数据" width="50">
      <template #default="scope">
        <el-checkbox v-model="scope.row.webIgnore" disabled></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template #default="scope" v-if="isEdit">
        <el-button size="mini" @click="handleSave(scope.$index, scope.row)"
          >保存</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleReturn(scope.$index, scope.row)"
          >返回</el-button
        >
      </template>
      <template #default="scope" v-else>
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      formInline: {
        TableName: "",
        TableDescription: "",
      },
      selectTable: [],
      currentTableId: "",
      editData: [], //编辑行初始数据
      editId: -1, //判断编辑的是哪一行
      isEdit: false,
      options: [
        {
          value: "uniqueidentifier",
          label: "uniqueidentifier",
        },
        {
          value: "nvarchar",
          label: "nvarchar",
        },
        {
          value: "varchar",
          label: "varchar",
        },
        {
          value: "int",
          label: "int",
        },
        {
          value: "decimal",
          label: "decimal",
        },
        {
          value: "datetime",
          label: "datetime",
        },
        {
          value: "ntext",
          label: "ntext",
        },
        {
          value: "bit",
          label: "bit",
        },
      ],
      tableData: [],
      dialogFormVisible: false,
      oldForm: "",
      form: "",
      formLabelWidth: "120px",
      InitForm: {
        id: "",
        columnName: "",
        columnDescription: "",
        columnType: "",
        maxLength: 0,
        minLength: 0,
        isKey: false,
        isNull: true,
        webIgnore: false,
        dbIgnore: false,
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let that = this;
      axios
        .get("https://localhost:44328/api/Code/GetList")
        .then(function (response) {
          that.selectTable = response.data.data;
          that.currentTableId = response.data.data[0].value;
          that.tableChange();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    tableChange() {
      let that = this;
      axios
        .get("https://localhost:44328/api/Code/Find", {
          params: { id: this.currentTableId },
        })
        .then(function (response) {
          let row = response.data.data;
          //that.formInline.TableName = row.tableName;
          //that.formInline.TableDescription = row.tableDescription;
          that.tableData = row.columns;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    addRow() {
      this.editId = this.tableData.length;
      let row = {
        columnName: "",
        columnDescription: "",
        columnType: "",
        maxLength: 0,
        minLength: 0,
        isKey: false,
        isNull: true,
      };
      this.tableData.push(row);
    },
    handleEdit(index, row) {
      this.editId = index;
      this.isEdit=true;
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
      console.log(index, row);
    },
    handleSave() {
      axios
        .post("https://localhost:44328/api/Code/ModifyField", {
          OldField: this.oldForm,
          NewField: this.form,
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    TestMessage() {
      ElMessage.success({
        dangerouslyUseHTMLString: true,
        message: "居中的文字",
        center: true,
        offset: 200,
      });
    },
  },
};
</script>
<style>
.el-select {
  display: block;
  position: relative;
  line-height: 40px;
}
</style>
